<template>
	<view>
		<view class="cart_name">
			<view class="custom_name">
				<text>收货人：张三</text>
				<text>电话：021-8166788</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="custom_adress">
				<text>收获地址：广东省广州市天河区143号</text>
			</view>
			<u-line-progress color="#2979ff"></u-line-progress>
			<view class="cart_title">
				<u-icon name="shopping-cart" size="50" color="gray"></u-icon>
				<text>购物车</text>
			</view>

		</view>
		<!-- 购物车列表 -->
		<view class="goods-item-list" v-for="(item,i) in 5 " :key='i'>
			<!-- 左侧图片列表 -->
			<view class="goods-item-left">
				<label class="radio">
					<radio  color="#c00000" /><text></text>
				</label>
				<image
					src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/forum/pic/item/e4dde71190ef76c676506d758a16fdfaae5167ea.jpg">
				</image>
			</view>
			<!-- 右侧区域 -->
			<view class="goods-item-right">
				<view class="goods_detail">
					<text>Lenovo/联想 小新Air14 锐龙版轻薄笔记本电脑学生超薄便携手提电脑六核R5 5500U游戏本指纹解锁</text>
				</view>
				<view class="goods_price">
					<text>￥369.00</text>
					<u-number-box></u-number-box>
				</view>
			</view>
		</view>
		<view class="goods_tab">
			<view class="goods_tab_text">
				<label class="radio">
					<radio value="全选" color="#c00000" /><text style="font-size: 12px;padding: 5px;">全选</text>
				</label>
				<text style="color: #C00000;">合计：￥665.00</text>
				<button type="warn" style="font-size: 14px;">结算（3）</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.cart_name {
		border-bottom: 1px solid #C8C9CC;

		.custom_name {
			height: 30px;
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			padding: 5px;
		}

		.custom_adress {
			font-size: 12px;
			padding: 5px;
		}

		.cart_title {
			padding: 5px;
			font-size: 12px;

			text {
				margin: 0 5px;

			}
		}
	}

	.goods-item-list {
		display: flex;

		.goods-item-left {
			margin-right: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 5px;

			image {
				width: 100px;
				height: 100px;
				display: block;
			}
		}

		.goods-item-right {

			.goods_detail {
				font-size: 12px;
				padding: 5px;
			}

			.goods_price {
				font-size: 12px;
				color: #FA3534;
				align-items: center;
				display: flex;
				justify-content: space-between;
				padding-right: 10px;
			}
		}
	}

	.goods_tab {
		position: fixed;
		bottom: 0;
		left: 0;
		width:100%;
		background: #FFFFFF;
		.goods_tab_text{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.radio{
				padding: 5px;
			}
			button{
				margin-right: 0px;
			}
			text{
				margin: 10px;
			}
		}
	}
</style>
